﻿<phone:PhoneApplicationPage 
    x:Class="Vent.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
    xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
    xmlns:controls="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:f ="clr-namespace:Foundation.Markup;assembly=Foundation"
    xmlns:viewModels="clr-namespace:Vent.ViewModels"
    mc:Ignorable="d" d:DesignWidth="480" d:DesignHeight="800" 
    FontFamily="{StaticResource PhoneFontFamilyNormal}"
    FontSize="{StaticResource PhoneFontSizeNormal}"
    Foreground="{StaticResource PhoneForegroundBrush}"
    SupportedOrientations="Portrait"  Orientation="Portrait"
    shell:SystemTray.IsVisible="False"
    Name="This">

    <Grid DataContext="{f:Store ItemType=viewModels:TouchViewModel}">
        
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>
            <RowDefinition Height="Auto"/>
        </Grid.RowDefinitions>

        <controls:Pivot
            ItemsSource="{Binding Tools}"
            SelectedItem="{Binding Tool, Mode=TwoWay}">
            
            <controls:Pivot.ItemTemplate>
                <DataTemplate>
                    <Grid Margin="0 -24 0 8">

                        <Grid.RowDefinitions>
                            <RowDefinition Height="Auto"/>
                            <RowDefinition Height="120"/>
                        </Grid.RowDefinitions>

                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="Auto"/>
                            <ColumnDefinition Width="Auto"/>
                            <ColumnDefinition Width="Auto"/>
                            <ColumnDefinition Width="Auto"/>
                            <ColumnDefinition Width="Auto"/>
                        </Grid.ColumnDefinitions>

                        <Grid.Resources>
                            <Style TargetType="TextBlock">
                                <Setter Property="Margin" Value="4 0 4 4"/>
                            </Style>
                        </Grid.Resources>

                        <TextBlock Grid.Column="0" Grid.Row="0" Text="{f:Localizing Key=Stroke}"/>
                        <TextBlock Grid.Column="1" Grid.Row="0" Text="{f:Localizing Key=Water}"/>
                        <TextBlock Grid.Column="2" Grid.Row="0" Text="{f:Localizing Key=Tickness}"/>
                        <TextBlock Grid.Column="3" Grid.Row="0" Text="{f:Localizing Key=Opacity}"/>

                        <ListBox 
                            Grid.Column="4" Grid.Row="1" 
                            SelectionMode="Single"
                            SelectedItem="{Binding CurrentMask, Mode=TwoWay}"
                            ItemsSource="{Binding Masks}">
                            <ListBox.ItemTemplate>
                                <DataTemplate>
                                    <Canvas OpacityMask="{Binding}" Width="48" Height="48" Background="{StaticResource PhoneForegroundBrush}" Margin="4"/>
                                </DataTemplate>
                            </ListBox.ItemTemplate>
                            <ListBox.ItemContainerStyle>
                                <Style TargetType="ListBoxItem">
                                    <Setter Property="Template">
                                        <Setter.Value>
                                            <ControlTemplate TargetType="ListBoxItem">
                                                <Grid Background="{TemplateBinding Background}">
                                                    <VisualStateManager.VisualStateGroups>
                                                        <VisualStateGroup x:Name="SelectionStates">
                                                            <VisualState x:Name="Unselected">
                                                                <Storyboard>
                                                                    <DoubleAnimation Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Opacity" Duration="0" To="0.5"/>
                                                                </Storyboard>
                                                            </VisualState>
                                                            <VisualState x:Name="Selected">
                                                                <Storyboard>
                                                                    <DoubleAnimation Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Opacity" Duration="0" To="1.0"/>
                                                                </Storyboard>
                                                            </VisualState>
                                                        </VisualStateGroup>
                                                    </VisualStateManager.VisualStateGroups>
                                                    <ContentPresenter
                                                        Name="ContentPresenter"
                                                        ContentTemplate="{TemplateBinding ContentTemplate}"
                                                        HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                                                        Margin="{TemplateBinding Padding}"/>
                                                </Grid>
                                            </ControlTemplate>
                                        </Setter.Value>
                                    </Setter>
                                </Style>
                            </ListBox.ItemContainerStyle>
                        </ListBox>

                        <Grid 
                            Grid.Column="0" Grid.Row="1" 
                            Width="80" VerticalAlignment="Stretch">

                            <Grid.ColumnDefinitions>
                                <ColumnDefinition/>
                                <ColumnDefinition/>
                            </Grid.ColumnDefinitions>

                            <Grid.RowDefinitions>
                                <RowDefinition Height="Auto"/>
                                <RowDefinition Height="*"/>
                                <RowDefinition Height="Auto"/>
                            </Grid.RowDefinitions>

                            <Canvas 
                                Grid.ColumnSpan="2" Grid.Column="0"
                                Name="BaseBrush" 
                                Background="{Binding Stroke, Mode=OneTime}"
                                Height="20" 
                                VerticalAlignment="Stretch"
                                HorizontalAlignment="Stretch"/>

                            <Canvas 
                                Grid.ColumnSpan="2" Grid.Column="0"
                                Name="StrokeBrush" Grid.Row="2" 
                                Background="{Binding Stroke, Mode=TwoWay}"
                                Height="20"
                                VerticalAlignment="Stretch"
                                HorizontalAlignment="Stretch"/>

                            <Canvas    
                                Grid.Row="1"
                                Grid.Column="0"
                                Name="RainbowPalette"
                                HorizontalAlignment="Stretch"
                                VerticalAlignment="Stretch"
                                Background="{StaticResource RainbowBrush}"
                                MouseEnter="Rainbow_OnMouseMove"
                                MouseMove="Rainbow_OnMouseMove"
                                Tap="Rainbow_OnTap"/>

                            <Canvas 
                                Grid.Row="1"
                                Grid.Column="1"
                                Name="GradientPalette"
                                Loaded="Gradient_OnLoaded"
                                MouseEnter="Rainbow_OnMouseMove"
                                MouseMove="Rainbow_OnMouseMove"
                                Tap="Rainbow_OnTap"
                                VerticalAlignment="Stretch"
                                HorizontalAlignment="Stretch"/>
                        </Grid>

                        <CheckBox
                            Grid.Column="1" Grid.Row="1" 
                            IsChecked="{Binding Water, Mode=TwoWay}" 
                            HorizontalAlignment="Center" 
                            VerticalAlignment="Top"
                            Margin="-4"/>

                        <Slider
                            Grid.Column="2" Grid.Row="1"
                            Orientation="Vertical"
                            Minimum="1" Maximum="100" 
                            Value="{Binding Tickness, Mode=TwoWay}"/>

                        <Slider 
                            Grid.Column="3" Grid.Row="1" 
                            Orientation="Vertical"
                            Minimum="0" Maximum="1" 
                            Value="{Binding Opacity, Mode=TwoWay}"/>

                    </Grid>
                </DataTemplate>
            </controls:Pivot.ItemTemplate>
        </controls:Pivot>

        <ContentPresenter
            Grid.Row="1"
            Content="{Binding Canvas}"
            VerticalAlignment="Stretch"
            HorizontalAlignment="Stretch"/>

        <controls:Pivot 
            Grid.Row="2" Margin="0" 
            DataContext="{f:Store ItemType=viewModels:SettingsViewModel}"
            SelectedIndex="{f:ViewModel PropertyKey=SelectedTab, DefaultValue=0}">
            
            <controls:PivotItem 
                Header="{f:Localizing Key=Touch}"
                DataContext="{f:Store ItemType=viewModels:TouchViewModel}">
                <Grid>
                    
                    <Grid.RowDefinitions>
                        <RowDefinition/>
                        <RowDefinition/>
                    </Grid.RowDefinitions>
                    
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="Auto"/>
                        <ColumnDefinition Width="*"/>
                        <ColumnDefinition Width="Auto"/>
                    </Grid.ColumnDefinitions>
                    
                    <Button Grid.Column="0" Command="{f:Command Key=Back}" Content="{f:Picture Key=/Resources/IconSet/Back.png, Width=32, Height=32}"/>
                    <StackPanel Grid.Row="0" Grid.Column="1">
                        <StackPanel Orientation="Horizontal" HorizontalAlignment="Center">
                            <TextBlock Text="{Binding TouchIndex}"/>
                            <TextBlock Text="{f:Localizing Key=Of, StringFormat=' {0} '}"/>
                            <TextBlock Text="{Binding TouchsCount}"/>
                        </StackPanel>
                        <Slider Margin="0 -16 0 -32" Minimum="0" Maximum="{Binding TouchsCount}" Value="{Binding TouchIndex, Mode=TwoWay}"/>
                    </StackPanel>
                    <Button Grid.Row="0" Grid.Column="2" Command="{f:Command Key=Next}" Content="{f:Picture Key=/Resources/IconSet/Next.png, Width=32, Height=32}"/>
                    <StackPanel Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="3" Orientation="Horizontal" HorizontalAlignment="Center">
                        <Button Content="{f:Picture Key=/Resources/IconSet/Delete.png}" Command="{f:Command Key=Delete}"/>
                        <Button Content="{f:Picture Key=/Resources/IconSet/Cut.png}" Command="{f:Command Key=Cut}"/>
                        <Button Content="{f:Picture Key=/Resources/IconSet/Paste.png}" Command="{f:Command Key=Paste}"/>
                        <Button Content="{f:Picture Key=/Resources/IconSet/Cup.png}" Command="{f:Command Key=Dry}"/>
                    </StackPanel>
                    
                </Grid>
            </controls:PivotItem>
            
            <controls:PivotItem 
                Header="{f:Localizing Key=Canvas}"
                DataContext="{f:Store ItemType=viewModels:CanvasViewModel}">
                <StackPanel Orientation="Horizontal">
                    <Button Content="{f:Localizing Key=Jack}" CommandParameter="/Resources/jack.jpg" Command="{f:Command Key=Open}"/>
                    <Button Content="{f:Localizing Key=Save}" Command="{f:Command Key=Save}"/>
                    <Button Content="{f:Localizing Key=Open}" Command="{f:Command Key=Open}"/>
                    <Button Content="{f:Localizing Key=Wash}" Command="{f:Command Key=New}"/>
                </StackPanel>
            </controls:PivotItem>
            
            <controls:PivotItem Header="{f:Localizing Key=Language}">
                <ListBox
                    HorizontalAlignment="Stretch"
                    VerticalAlignment="Stretch"
                    DataContext="{f:Store ItemType=viewModels:SettingsViewModel}"
                    SelectedItem="{Binding Language, Mode=TwoWay}" 
                    ItemsSource="{Binding Languages}"/>
            </controls:PivotItem>
            
        </controls:Pivot>
    </Grid>
</phone:PhoneApplicationPage>